// src/components/VoiceHistoryList/index.tsx
import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  StyleSheet,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { VoiceRecord } from '../../types';

interface VoiceHistoryListProps {
  data: VoiceRecord[];
  onSelect: (item: VoiceRecord) => void;
  onPlay?: (item: VoiceRecord) => void;
  onDelete?: (item: VoiceRecord) => void;
}

const VoiceHistoryList: React.FC<VoiceHistoryListProps> = ({
                                                             data,
                                                             onSelect,
                                                             onPlay,
                                                             onDelete,
                                                           }) => {
  const formatDuration = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const formatTime = (date: Date): string => {
    const now = new Date();
    const diff = now.getTime() - new Date(date).getTime();
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return '刚刚';
    if (minutes < 60) return `${minutes}分钟前`;
    if (hours < 24) return `${hours}小时前`;
    if (days < 7) return `${days}天前`;
    return new Date(date).toLocaleDateString('zh-CN');
  };

  const renderItem = ({ item }: { item: VoiceRecord }) => (
    <TouchableOpacity
      style={styles.item}
      onPress={() => onSelect(item)}
      activeOpacity={0.7}
    >
      <View style={styles.itemLeft}>
        <View style={styles.iconContainer}>
          <Icon name="mic" size={20} color="#667eea" />
        </View>
        <View style={styles.content}>
          <Text style={styles.transcript} numberOfLines={2}>
            {item.transcript}
          </Text>
          <View style={styles.meta}>
            <Text style={styles.time}>{formatTime(item.timestamp)}</Text>
            <Text style={styles.duration}>
              <Icon name="schedule" size={12} color="#999" />
              {' '}{formatDuration(item.duration)}
            </Text>
          </View>
        </View>
      </View>

      <View style={styles.actions}>
        {onPlay && (
          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => onPlay(item)}
          >
            <Icon name="play-arrow" size={20} color="#667eea" />
          </TouchableOpacity>
        )}
        {onDelete && (
          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => onDelete(item)}
          >
            <Icon name="delete" size={20} color="#ff6b6b" />
          </TouchableOpacity>
        )}
      </View>
    </TouchableOpacity>
  );

  const renderEmptyState = () => (
    <View style={styles.emptyState}>
      <Icon name="history" size={60} color="#ddd" />
      <Text style={styles.emptyText}>暂无历史记录</Text>
      <Text style={styles.emptyHint}>您的语音识别记录将显示在这里</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      ListEmptyComponent={renderEmptyState}
      contentContainerStyle={styles.list}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

const styles = StyleSheet.create({
  list: {
    flexGrow: 1,
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    backgroundColor: '#fff',
  },
  itemLeft: {
    flexDirection: 'row',
    flex: 1,
  },
  iconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#f0f0ff',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  content: {
    flex: 1,
  },
  transcript: {
    fontSize: 14,
    color: '#333',
    lineHeight: 20,
    marginBottom: 5,
  },
  meta: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  time: {
    fontSize: 12,
    color: '#999',
    marginRight: 15,
  },
  duration: {
    fontSize: 12,
    color: '#999',
    flexDirection: 'row',
    alignItems: 'center',
  },
  actions: {
    flexDirection: 'row',
  },
  actionButton: {
    padding: 8,
    marginLeft: 8,
  },
  separator: {
    height: 1,
    backgroundColor: '#f0f0f0',
    marginHorizontal: 15,
  },
  emptyState: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 60,
  },
  emptyText: {
    fontSize: 16,
    color: '#999',
    marginTop: 15,
  },
  emptyHint: {
    fontSize: 14,
    color: '#ccc',
    marginTop: 5,
  },
});

export default VoiceHistoryList;